<template lang="">
  <div class="settings">
    <el-card shadow="never" :body-style="{ padding: '20px' }">
      <el-tabs v-model="activeName" tab-position="left">
        <el-tab-pane label="安全设置" name="security">
          <div class="content">
            <div class="tab-title">安全设置</div>

            <div class="setting-item">
              <div class="left">
                <div class="title">账号密码</div>
                <div class="desc">当前密码强度: 强</div>
              </div>
              <div class="right">
                <el-button
                  type="text"
                  size="default"
                  style="font-size: 16px"
                >修改</el-button>
              </div>
            </div>

            <div class="setting-item">
              <div class="left">
                <div class="title">密保手机</div>
                <div class="desc">已绑定手机: 138****8888</div>
              </div>
              <div class="right">
                <el-button
                  type="text"
                  size="default"
                  style="font-size: 16px"
                >修改</el-button>
              </div>
            </div>

            <div class="setting-item">
              <div class="left">
                <div class="title">密保问题</div>
                <div class="desc">未设置密保问题，密保问题可有效保护账户安全</div>
              </div>
              <div class="right">
                <el-button
                  type="text"
                  size="default"
                  style="font-size: 16px"
                >修改</el-button>
              </div>
            </div>

            <div class="setting-item">
              <div class="left">
                <div class="title">备用邮箱</div>
                <div class="desc">已绑定邮箱：ant***sign.com</div>
              </div>
              <div class="right">
                <el-button
                  type="text"
                  size="default"
                  style="font-size: 16px"
                >修改</el-button>
              </div>
            </div>

            <div class="setting-item">
              <div class="left">
                <div class="title">MFA 设备</div>
                <div class="desc">未绑定 MFA 设备，绑定后，可以进行二次确认</div>
              </div>
              <div class="right">
                <el-button
                  type="text"
                  size="default"
                  style="font-size: 16px"
                >修改</el-button>
              </div>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="新消息通知" name="message">
          <div class="content">
            <div class="tab-title">新消息通知</div>

            <div class="setting-item">
              <div class="left">
                <div class="title">账户密码</div>
                <div class="desc">其他用户的消息将以站内信的形式通知</div>
              </div>
              <div class="right">
                <el-switch v-model="val1" :active-value="true" :inactive-value="false" />
              </div>
            </div>

            <div class="setting-item">
              <div class="left">
                <div class="title">系统消息</div>
                <div class="desc">系统消息将以站内信的形式通知</div>
              </div>
              <div class="right">
                <el-switch v-model="val2" :active-value="true" :inactive-value="false" />
              </div>
            </div>

            <div class="setting-item">
              <div class="left">
                <div class="title">待办任务</div>
                <div class="desc">待办任务将以站内信的形式通知</div>
              </div>
              <div class="right">
                <el-switch v-model="val3" :active-value="true" :inactive-value="false" />
              </div>
            </div>

          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'security',
      val1: true,
      val2: true,
      val3: true
    }
  }
}
</script>
<style lang="scss" scoped>
.settings {
  margin: 30px;
  .content {
    padding: 10px;
    .tab-title {
      font-size: 22px;
      margin-bottom: 20px;
    }

    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #f0f0f0;
      .left {
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        margin-bottom: 10px;
        .title {
            margin-bottom: 10px;
        }
        .desc {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
        }
      }
    }
  }
}
</style>
